<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<!-- <view class="back iconfont icon-xiangzuo1" @tap="backPage"></view> -->
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">订单</view>
		</view>	
		
		<view class="nav" :class="scrrol == true ? 'scrrolHeader02' : ''">
			<view class="navauto">
				<block v-for="(item, index) in menu" :key="index">
					<view class="menu" :data-index="index" @tap="setNavMenu">
						<view class="text" :class="index == select ? 'menucolor' : ''">{{ item.text }}
						   <view class="line" :class="index == select ? 'menucolor02' : ''"></view>
						</view>
						
					</view>
				</block>
			</view>
		</view>
		<view class="clear_box"></view>
		<view class="clear_box02"></view>
		
		<block v-for="(item, index) in order">
			<view class="order_list" >
				<view class="other_box" :data-url="'/pages/order/details?id='+item.id" @click="gotopage">
					<view class="icon iconfont icon-dingdan"></view>
					<view class="number">{{item.order_no}}</view>
					<view class="type" v-if="item.order_status == 0">已取消</view>
					<view class="type" v-if="item.order_status == 1">待支付</view>
					<view class="type" v-if="item.order_status == 2">已下单</view>
					<view class="type" v-if="item.order_status == 3">已签约</view>
					<view class="type" v-if="item.order_status == 4">已部署</view>
					<!-- <view class="type" v-if="item.order_status == 5">已完成</view> -->
					<view class="type" v-if="item.order_status == 6">
						<view v-if="item.refund_state == 2">已退款</view>
						<view v-if="item.refund_state == 0">退款处理中</view>
					</view>
				</view>
				<view class="order_goods" :data-url="'/pages/order/details?id='+item.id" @click="gotopage">
					<view class="order_img">
						<image :src="item.img" mode="scaleToFill"></image>
					</view>
					<view class="order_text">
						<view class="title">{{item.order_name}}</view>
						<view class="money_box">
							<view class="money">￥{{item.pay_fee}}</view>
							<view class="num">共{{item.quantity}}件</view>
						</view>
					</view>				
				</view>
				<view class="refund" v-if="item.order_status == 6 && item.refund_state == 2">
					<view class="text">退款成功</view>
					<view class="money">￥{{item.pay_fee}}</view>
				</view>
				<view class="menu_box">
					<view class="menu02" v-if="item.order_status == 1" @tap="update(item.id,0)">取消订单</view>
					<view class="menu01" v-if="item.order_status == 1" :data-url="'/pages/order/pay?order_id='+item.id" @click.stop="gotopage">去支付</view>
					<view class="menu02" v-if="item.order_status == 2 && item.contract_status == 0" @tap="update(item.id,6)">可退款</view>
					<view class="menu01" v-if="item.contract_status == 1" :data-url="'/pages/personalcenter/contract?order_id='+item.id" @click.stop="gotopage">签合同</view>
					<!-- <view class="menu02" v-if="item.order_status == 4">去部署</view> -->
					<view class="menu01" v-if="(item.order_status == 3 || item.order_status == 4) && item.invoice_status == 0" :data-url="'/pages/order/invoice?id='+item.id+'&money='+item.pay_fee" @click.stop="gotopage">开发票</view>
					<view class="menu02" v-if="item.order_status == 0" @tap="update(item.id,11)">删除订单</view>
				</view>
			</view>
		</block>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page:1,
				scrrol:false,
				order:[],
				select:0,
				menu: [
					{
						text: '全部'
					},
					{
						text: '待支付'
					},
					{
						text: '已下单'
					},
					{
						text: '已签约'
					},
					{
						text: '退款'
					}
				],
				status:0,
			}
		},
		onLoad() {
			let that = this;
			that.loadData();
		},
		onShow() {
			let that = this;
			let order_list = uni.getStorageSync('order_list');
			if (order_list){
				that.page = 1;
				that.loadData();
				uni.removeStorageSync('order_list');
			}
		},
		methods: {
			setNavMenu(e) {
				let that = this;
				let index = e.currentTarget.dataset.index;
				that.select = index;
				that.status = index;
				if (index == 4){
					that.status = 6;
				}
				that.page = 1;
				that.loadData();
			},
			loadData() {
				let that = this;
				that.Net._get('auth/order/list', {per_page:'10',page:that.page,status:that.status}, res => {
					if (res.code == 200) {
						that.order = res.data.data;
					}
				});
			},
			update(order_id,status){
				let that = this;
				uni.showModal({
				    title: '确认提示',
				    content: '是否确认该操作',
				    success:(res) => {
				        if (res.cancel){
				            return false;
				        }
				        that.Net._post('auth/order/update', {order_id:order_id,status:status}, res => {
				        	if (res.code == 200) {
				        		that.Msg.Success(res.msg, res => {
				        			that.page = 1;
				        			that.loadData();
				        		});
				        	}
				        });
				    }
				});
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},

		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		},
		onReachBottom() {
			var that = this;
			that.page ++;
			that.Net._get('auth/order/list', {per_page:'10',page:that.page,status:that.status}, res => {
				if (res.code == 200) {
					//console.log(res)
					if (res.data.data == '') {
						uni.showToast({
							title: '已经是最后一页了',
							duration: 2000,
							icon: 'none'
						});
					} else {
						that.order = that.order.concat(res.data.data); //将数据拼接在一起
					}
				} else if (res.code == 0) {
					that.Msg.Success(res.msg, res => {});
				}
			});
		},
	}
</script>

<style>
	.scrrolHeader{
		background-color: #FF7701 !important;
	}
	
	.scrrolHeader02{
		background-color: #fff !important;
	}
	
	.clear_box02{
		height: 13.5vw !important;
	}
	
	.nav {
		width: 100%;
		height: 13.5vw;
		overflow: hidden;
		overflow-x: auto;
		position: fixed;
		left: 0;
		top: calc(13.4vw + var(--status-bar-height));
		z-index: 99;
		/* background-color: #fff;
			border-bottom: 1px solid #e8e8e8; */
		box-sizing: border-box;
	}
	
	.nav .navauto {
		width: fit-content;
		display: flex;
		justify-content:space-around;
		/* margin-left: 4%; */
		min-width: 100%;
	}
	
	.nav .navauto .menu {
		/* width: 20%; */
		
	}
	
	.nav .navauto .menu .text {
		font-size: 4.5vw;
		color: #666666;
		text-align: center;
		line-height: 13.5vw;
		position: relative;
	}
	
	.nav .navauto .menu .line {
		width: 100%;
		height: 2.3vw;
		background-color: #FF7701;
		border-radius: 2.3vw;
		position: absolute;
		left: calc(50% - 50%);
		bottom: 3.5vw;
		z-index: -1;
		display: none;
		
	}
	
	.menucolor {
		color: #091624 !important;
		font-weight: bold;
		font-size: 4.7vw !important;
	}
	
	.menucolor02 {
		display: block !important;
	}
	
	.menucolor03 {
		background-color: #FF9822 !important;
	}
	
	.order_list{
		width: 92%;
		margin: 0 auto 4%;
		background-color: #fff;
		padding: 5vw 4vw;
		border-radius: 3vw;
	}
	
	.order_list .other_box{
		width: 100%;
		display: flex;
		align-items: center;
	}
	
	.order_list .other_box .icon{
		font-size: 5vw;
		color: #FF9822;
		margin-right: 1vw;
	}
	
	.order_list .other_box .number{
		font-size: 3.5vw;
		color: #666666;
		margin-right: 2vw;
		flex: 1;
	}
	
	.order_list .other_box .type{
		font-size: 3.7vw;
		color: #FD3633;
	}
	
	.order_list .order_goods{
		width: 100%;
		margin-top: 4vw;
		display: flex;
		padding-bottom: 4vw;
		border-bottom: 1px dashed #E0E0E0;
	}
	
	.order_list .order_goods .order_img{
		width: 20vw;
		margin-right: 3vw;
	}
	
	.order_list .order_goods .order_img image{
		width: 20vw;
		height: 20vw;
		border-radius: 3vw;
	}
	
	.order_list .order_goods .order_text{
		flex: 1;
	}
	
	.order_list .order_goods .order_text .title{
		font-size: 4.2vw;
		color: #333;
		font-weight: bold;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	
	.order_list .order_goods .order_text .money_box{
		margin-top: 3vw;
		width: 100%;
		display: flex;
		align-items: center;
	}
	
	.order_list .order_goods .order_text .money_box .money{
		font-size: 4vw;
		color: #333;
		flex: 1;
		font-weight: bold;
	}
	
	.order_list .order_goods .order_text .money_box .num{
		font-size: 3.5vw;
		color: #999999;
		
	}
	
	.order_list .refund{
		width: 100%;
		height: 11vw;
		padding: 0 4vw;
		border-radius: 2vw;
		background-color: #F6F6F6;
		display: flex;
		align-items: center;
		margin-top: 4vw;
	}
	
	.order_list .refund .text{
		font-size: 3.2vw;
		color: #666;
		margin-right: 1vw;
		
	}
	
	.order_list .refund .money{
		font-size: 4vw;
		color: #333;
		font-weight: bold;
		
	}
	
	.order_list .menu_box{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-top: 5vw;
	}
	
	.order_list .menu_box .menu01{
		width: 24vw;
		height: 11vw;
		background-color: #FF7701;
		border-radius: 11vw;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 3.8vw;
		color: #fff;
		margin-left: 3vw;
	}
	
	.order_list .menu_box .menu02{
		width: 22vw;
		height: 11vw;
		background-color: transparent;
		border-radius: 11vw;
		border: 1px solid #E0E0E0;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 3.8vw;
		color: #999999;
	}
	
	
	
	
	
	
	
</style>
